<template>
  <div class="RentalHousing">
    <van-nav-bar
      title="房屋管理"
      left-arrow
      @click-left="$router.go(-1)"
      class="bar"
    />
    <van-cell-group>
      <van-cell title="房源信息" class="PropertyInformation" />
      <van-cell title="小区名称" value="请输入小区名称" />
      <van-cell title="租金" value="请输入租金/月    ￥/月" />
      <van-cell title="建筑面积" value="请输入建筑面积      ㎡" />
      <van-cell title="户型" value="请选择" is-link />
      <van-cell title="所在楼层" value="请选择" is-link />

      <van-cell title="朝向" value="请选择" is-link />
    </van-cell-group>
    <!-- 房子位子 -->
    <van-panel title="房屋标题">
      <div class="example">请输入标题 (例如: 整租 小区名 2室 5000元)</div>
    </van-panel>
    <!-- 房子上传图片 -->
    <van-panel title="房屋图像">
      <div><van-uploader :after-read="afterRead" /></div>
    </van-panel>
    <!-- 房间配置 -->
    <van-panel title="房间配置">
      <div class="roomconfiguration">
        <van-grid :column-num="5" :border="false" icon-size="23px">
          <van-grid-item v-for="item in list" :key="item.match">
            <van-icon
              class="iconfont"
              class-prefix="icon"
              :name="item.icon"
              size="30"
            ></van-icon>
            <span class="someMatch">{{ item.match }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </van-panel>
    <!-- 房间描述 -->
    <van-panel title="房间描述">
      <div class="roomdescription">
        <div class="information">请输入房屋描述信息</div>
      </div>
    </van-panel>
    <!-- 按钮 -->
    <div class="buttons">
      <van-button type="primary" size="large" color="#fff">取消</van-button>
      <van-button type="primary" size="large">提交</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RentalHousing',
  data () {
    return {
      list: [
        { match: '衣柜', icon: 'yg' },
        { match: '洗衣机', icon: 'xyj' },
        { match: '空调', icon: 'kt' },
        { match: '天然气', icon: 'trq' },
        { match: '冰箱', icon: 'bx' },
        { match: '暖气', icon: 'nq' },
        { match: '电视', icon: 'ds' },
        { match: '热水器', icon: 'rsq' },
        { match: '宽带', icon: 'wifi' },
        { match: '沙发', icon: 'sf' }
      ]
    }
  },
  async created () {},
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    }
  }
}
</script>
<style lang="less" scoped>
.bar {
  background-color: #21b97a;
}
.buttons {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #a1e1f8;
  z-index: 9;
}
.van-button__text {
  color: #087;
}
.PropertyInformation {
  font-size: 19px;
  color: #21b97a;
}
.example {
  height: 40px;
  font-size: 12px;
  color: rgb(120, 120, 120);
}
.roomconfiguration {
  width: 100%;
  height: 190px;
  background-color: #f6f5f6;
}
.roomdescription {
  width: 100%;
  height: 250px;
  background-color: #f6f5f6;
  .information {
    width: 100%;
    height: 200px;
    background-color: #fff;
    color: #b3acac;
    font-size: 13px;
  }
}
</style>
